<!--
 * @Date: 2021-09-03 09:56:48
 * @Author: 陶子
 * @LastEditTime: 2023-06-15 16:19:20
 * @FilePath: \jk_one-stop_pc\src\views\bigView\production\components\rejectedGood.vue
 * @pageName: 这是--（不合格品趋势图（近十天））--组件
-->
<template>
  <div class="livenessRoot">
    <div class="dashline">
      <div></div>
      <div></div>
    </div>
    <div class="topBox">
      <div class="topTitle">
        <img src="~@/assets/img/screen-p1.png" alt="" />
        不合格品趋势图(近10天)
      </div>
    </div>
    <Echart :options="options" height="85%" width="100%"></Echart>
  </div>
</template>
<script>
import Echart from '@/common/echart'
export default {
  components: { Echart },
  props: ['rejectData'],
  data() {
    return {
      bgColor: 'transparent',
      options: {},
      dateList: [],
      percentageList: [],
      unqualifiedNumList: [],
    }
  },
  watch: {
    rejectData: {
      handler() {
        this.dateList = []
        this.percentageList = []
        this.unqualifiedNumList = []
        this.rejectData.forEach((item) => {
          this.dateList.push(item.date)
          this.percentageList.push(item.percentage)
          this.unqualifiedNumList.push(item.unqualifiedNum)
        })
        this.options = {
          tooltip: {
            trigger: 'axis',
            formatter(params) {
              if (params.length == 2) {
                let dataOne = params[0]
                let dataTwo = params[1]
                if (dataOne.seriesName == '不合格数') {
                  return `${dataOne.axisValueLabel}<br />${dataOne.seriesName}：${dataOne.value} <br />${dataTwo.seriesName}：${dataTwo.value}%<br />`
                } else {
                  return `${dataTwo.axisValueLabel}<br />${dataTwo.seriesName}：${dataTwo.value} <br />${dataOne.seriesName}：${dataOne.value}%<br />`
                }
              }
              if (params.length == 1) {
                let dataOne = params[0]
                if (dataOne.seriesName == '不合格数') {
                  return `${dataOne.axisValueLabel}<br />${dataOne.seriesName}：${dataOne.value}`
                } else {
                  return `${dataOne.axisValueLabel}<br />${dataOne.seriesName}：${dataOne.value}%<br />`
                }
              }
            },
          },
          grid: {
            top: '18%',
            left: '0%',
            right: '0%',
            bottom: '5%',
            containLabel: true,
          },
          legend: {
            itemGap: 88,
            align: 'left',
            data: ['不合格数', '不合格率'],
            textStyle: {
              color: '#f9f9f9',
              borderColor: '#fff',
              fontSize: 12,
            },
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: false,
                lineStyle: {
                  color: '#f9f9f9',
                },
              },
              axisLabel: {
                interval: 0,
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15,
                },
              },
              offset: 15,
              axisTick: {
                show: false,
              },
              data: this.dateList,
            },
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              // max: 140,
              splitNumber: 5,
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(4, 188, 255, 0.2)',
                  type: 'dashed',
                },
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  color: '#d1e6eb',
                },
              },
              axisTick: {
                show: false,
              },
            },
            {
              type: 'value',
              // min: 0,
              splitNumber: 5,
              axisLine: {
                show: false,
              },
              axisLabel: {
                formatter: function (value) {
                  return value + ' %'
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#1d2158',
                },
              },
            },
          ],
          series: [
            {
              name: '不合格率',
              type: 'line',
              yAxisIndex: 1,
              smooth: true,
              showAllSymbol: true,
              symbol: 'none',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#F42648', // 线条颜色
                },
                borderColor: '#f0f',
              },
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: '#fff',
                },
                fontSize: 14,
                formatter: (params) => {
                  return params.value + ' %'
                },
              },
              // 区域填充样式
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(244, 38, 72, 0.5)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(244, 38, 72, 0)', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              itemStyle: {
                normal: {
                  color: '#F42648',
                },
              },

              data: this.percentageList,
            },
            {
              name: '不合格数',
              type: 'bar',
              barWidth: 20,
              label: {
                show: false,
                position: 'insideTop',
                textStyle: {
                  color: '#fff',
                },
                fontSize: 14,
              },
              itemStyle: {
                normal: {
                  color: 'rgba(58,128,255,0.4)',
                  borderWidth: 1,
                  borderColor: '#3A80FF',
                },
              },
              data: this.unqualifiedNumList,
            },
          ],
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="less">
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.livenessRoot {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.5rem 0.1rem;
  .topBox {
    box-sizing: border-box;
    padding: 0.13rem 0.47rem 0 0;
    width: 100%;
    margin-bottom: 0.3rem;
    height: 0.65rem;
    .topTitle {
      font-size: 0.18rem;
      display: flex;
      align-items: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      background: url('~@/assets/img/screen-p2.png') no-repeat;
      background-size: 135% 40%;
      background-position: left bottom;
      img {
        width: 0.53rem;
        height: 0.52rem;
      }
    }
  }
  .dashline {
    width: 95%;
    height: 2px;
    border-bottom: 1px solid #04bbff;
    position: absolute;
    top: 1.4rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 12px;
      height: 2px;
      background: #04bbff;
    }
  }
}
</style>
